import React, { useEffect, useState } from 'react'
import instance from '../../api/request'
import { Button, Space, Table, Tag } from 'antd';
import { Checkbox, Form, Input } from 'antd';
import { Modal } from 'antd';
import { Pagination } from 'antd';
import {  message, Popconfirm } from 'antd';
import { Select } from 'antd';
function Index() {
  // 删除
  const confirm = id => {
  console.log(id);
  message.success('Click on Yes');
  const shanchu=list.filter((v)=>v.id!=id)
  setList(shanchu)
};
const cancel = e => {
  console.log(e);
  message.error('Click on No');
};
  // 重置
  const qinchu=()=>{
    addform.resetFields('')
  }
  // 搜索
  const handleChange = value => {
  console.log(`selected ${value}`);
};
  const [keyword,setKeyword]=useState('')
  const Finish = values => {
  console.log('Success:', values);
  setKeyword(values.keyword)
};
const FinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
// 编辑
 const [form] = Form.useForm();
const [edit,setEdit]=useState()
const bianji=(record)=>{
   setIsModalOpen(true);
    setTitle('编辑')
    setEdit(record.id)
    form.setFieldsValue({
     title:record.title,
     content:record.content
    })
}

  // 新增
  const [title,setTitle]=useState()
   const [addform] = Form.useForm();
   const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
    form.resetFields()
    setTitle('新增')

  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = values => {
  console.log('Success:', values);
  const commonData={
   title:values.title,//文章标题
content:values.content,//文章内容
tagList:values.tagList,//标签  array[string]
categoryList:values.categoryList,//分类  array[string]
authorId:47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息

  }
  if(title==='新增'){
  instance.post('/article',commonData,{
    headers : {
  Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imp5a2wiLCJ1c2VySWQiOjQ3NTI5NTU1LCJyb2xlIjoxLCJpYXQiOjE3Mzk3OTQyNDIsImV4cCI6MTc0MjM4NjI0Mn0.O7KlsogMjr6YowtOXKGrEaldz5kjKHWQCn3FGvRd1bA',
}

  }).then((res)=>{
    alert('新增成功')
      setIsModalOpen(false);
      gataList()
  })
}else{
  instance.put(`/article/${edit}`,commonData,{
        headers : {
  Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imp5a2wiLCJ1c2VySWQiOjQ3NTI5NTU1LCJyb2xlIjoxLCJpYXQiOjE3Mzk3OTQyNDIsImV4cCI6MTc0MjM4NjI0Mn0.O7KlsogMjr6YowtOXKGrEaldz5kjKHWQCn3FGvRd1bA',
}

  }).then((res)=>{
    alert('编辑成功')
   setIsModalOpen(false);
   gataList()
  })
}
  }

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
// 渲染表格
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = newSelectedRowKeys => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const [list,setList]=useState([])
  const gataList=()=>{
    instance.get('/article/list',{params:{
      keyword
    }}).then((res)=>{
      console.log(res);
      
      setList(res.data.rows)
    })
  }
  useEffect(()=>{
   gataList()
  },[keyword])
  const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    render: text => <a>{text}</a>,
  },
  {
    title: '计划名称',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '患者类型',
    dataIndex: 'content',
    key: 'content',
  },
    {
    title: '关联科室',
    dataIndex: 'content',
    key: 'content',
  },

  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button onClick={()=>bianji(record)}>编辑</Button>
         <Popconfirm
    title="Delete the task"
    description="你确定删除吗？"
    onConfirm={()=>confirm(record.id)}
    onCancel={cancel}
    okText="是的"
    cancelText="取消"
  >
    <Button danger>删除</Button>
  </Popconfirm>
      </Space>
    ),
  },
];
  return (
    <div>
      {/* 搜索 */}
       <Form
       form={addform}
    name="basic"
    layout='inline'
    style={{ maxWidth: 1200 ,float:"right"}}
    initialValues={{ remember: true }}
    onFinish={Finish}
    onFinishFailed={FinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="请输入计划名称"
      name="keyword"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

   <Form.Item
      label="请输入计划名称"
      name="keyword"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
   <Select
      defaultValue="计划名称"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: '你好', label: '你好' },
        { value: '1234', label: '1234' },
        { value: '一样的', label: '一样的' },
        { value: 'disabled', label: 'Disabled', disabled: true },
      ]}
    />
    </Form.Item>
     

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        查询
      </Button>
        <Button type="primary" htmlType="submit" onClick={qinchu}>
        重置
      </Button>
    </Form.Item>
  </Form>
      {/* 新增 */}
      <Button onClick={()=>showModal()}>新增</Button>
      <Button>批量删除</Button>
 <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
        form={form}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="计划名称"
      name="title"
      rules={[{ required: true, message: '请输入计划名称' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="患者类型"
      name="content"
      rules={[{ required: true, message: '请输入患者类型!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        新增
      </Button>
    </Form.Item>
  </Form>
      </Modal>
      <Table columns={columns} dataSource={list}   
      pagination={{
         total:85,
    showSizeChanger:true,
    showQuickJumper:true,
    // 9.数据进行分页， 每页10条， 点击分页器可以切换分页
    defaultPageSize:10,
    showTotal:total => `Total ${total} items`
      }}
      />;
    </div>
  )
}

export default Index